<template>
  <view class="detail-container">
    <!-- 课程信息卡片 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">课程信息</text>
        <view class="status-badge" :class="getStatusClass()">
          {{ getStatusText() }}
        </view>
      </view>
      
      <view class="info-list">
        <view class="info-item">
          <text class="label">课程名称</text>
          <input v-model="scheduleInfo.courseName" placeholder="未知" class="value-input" />
        </view>
        <view class="info-item">
          <text class="label">授课教师</text>
          <select 
            v-model="scheduleInfo.teacherName"
            class="value-select"
          >
            <option value="">请选择授课教师</option>
            <option 
              v-for="teacher in teacherList" 
              :key="teacher.teacherId"
              :value="teacher.teacherName"
            >
              {{ teacher.teacherName }}
            </option>
          </select>
        </view>
        <view class="info-item">
          <text class="label">上课班级</text>
          <input v-model="scheduleInfo.className" placeholder="请输入上课班级" class="value-input" />
        </view>
        <view class="info-item">
          <text class="label">上课地点</text>
          <input v-model="scheduleInfo.classLocation" placeholder="请输入上课地点" class="value-input" />
        </view>
        <view class="info-item">
          <text class="label">上课日期</text>
          <text class="value">{{ scheduleInfo.classDate || '--' }} {{ scheduleInfo.weekdayText ? `(${scheduleInfo.weekdayText})` : '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">上课时间</text>
          <text class="value">{{ scheduleInfo.startTime && scheduleInfo.endTime ? `${scheduleInfo.startTime} - ${scheduleInfo.endTime}` : '--' }}</text>
        </view>
      </view>
    </view>

    <!-- 添加巡班记录表单 -->
    <view class="patrol-form-container">
      <view class="form-header">
        <text class="form-title">添加巡班记录</text>
      </view>
      
      <view class="form-body">
        <!-- <view class="form-item">
          <text class="form-label">巡班教师 <text class="required">*</text></text>
          <input v-model="patrolForm.patrolTeacherName" placeholder="巡班教师姓名" class="form-input" disabled />
        </view> -->
        
        <view class="form-item">
          <text class="form-label">违纪情况 <text class="optional">(可选,不选表示无违纪)</text></text>
          <view class="violation-types">
            <view 
              v-for="(type, index) in violationTypes" 
              :key="index"
              class="violation-row"
            >
              <text class="violation-name">{{ type.text }}:</text>
              <view class="violation-buttons">
                <button 
                  v-for="num in 5" 
                  :key="num"
                  class="num-btn"
                  :class="{ 'active': getViolationCount(type.value) === num }"
                  @click="setViolationCount(type.value, num)"
                >
                  {{ num }}
                </button>
                <button 
                  class="other-btn"
                  :class="{ 'active': getViolationCount(type.value) > 5 }"
                  @click="showOtherInput(type.value)"
                >
                  其他
                </button>
                <text class="count-label">{{ getViolationCount(type.value) }}人</text>
              </view>
            </view>
          </view>
          <view v-if="getTotalCount() > 0" class="violation-summary">
            <text class="summary-text">违纪统计: {{ getViolationSummary() }}</text>
          </view>
          <!-- <view v-else class="no-violation-tip">
            <text class="tip-text">未选择违纪类型,提交后将记录为"无违纪"</text>
          </view> -->
        </view>
        
        <view class="form-item">
          <text class="form-label">违纪描述</text>
          <textarea 
            v-model="patrolForm.violationDesc" 
            placeholder="请输入违纪描述"
            class="form-textarea"
          ></textarea>
        </view>
        
        <view class="form-item">
          <text class="form-label">处理情况</text>
          <view class="status-radios">
            <view 
              class="status-radio"
              :class="{ 'active': patrolForm.status === 0 }"
              @click="patrolForm.status = 0"
            >
              <view class="radio-icon">{{ patrolForm.status === 0 ? '●' : '○' }}</view>
              <text>待处理</text>
            </view>
            <view 
              class="status-radio"
              :class="{ 'active': patrolForm.status === 1 }"
              @click="patrolForm.status = 1"
            >
              <view class="radio-icon">{{ patrolForm.status === 1 ? '●' : '○' }}</view>
              <text>已处理</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="form-footer">
        <button @click="resetForm" class="cancel-btn">取消</button>
        <button type="primary" @click="submitPatrol" class="submit-btn">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getToken } from '@/utils/auth'
import config from '@/config'

export default {
  data() {
    return {
      scheduleId: '',
      scheduleInfo: {},
      teacherList: [], // 教师列表
      patrolForm: {
        id: null,
        scheduleId: '',
        patrolTeacherName: '',
        violationType: '',
        violationCount: 0,
        violationDesc: '',
        status: 0
      },
      selectedViolations: [], // 选中的违纪类型数组
      violationCounts: {}, // 每种违纪类型的人数
      violationTypes: [
        { value: '迟到', text: '迟到' },
        { value: '早退', text: '早退' },
        { value: '旷课', text: '旷课' },
        { value: '玩手机', text: '玩手机' },
        { value: '睡觉', text: '睡觉' },
        { value: '吵闹', text: '吵闹' },
        { value: '打游戏', text: '打游戏' },
        { value: '刷视频', text: '刷视频' },
        { value: '其他', text: '其他' }
      ]
    }
  },
  onLoad(options) {
    this.scheduleId = options.scheduleId || options.id || ''
    
    // 始终设置 scheduleInfo,即使某些字段为空
    this.scheduleInfo = {
      courseName: decodeURIComponent(options.courseName || ''),
      teacherName: decodeURIComponent(options.teacherName || ''),
      className: decodeURIComponent(options.className || ''),
      classLocation: decodeURIComponent(options.classLocation || ''),
      classDate: decodeURIComponent(options.classDate || ''), // 实际日期 YYYY-MM-DD
      weekdayText: decodeURIComponent(options.weekdayText || ''), // 星期文本
      startTime: decodeURIComponent(options.startTime || ''),
      endTime: decodeURIComponent(options.endTime || ''),
      classroom: decodeURIComponent(options.classroom || ''),
      hasViolation: options.hasViolation === '1', // 是否有违纪
      violationId: decodeURIComponent(options.violationId || '') // 违纪记录ID
    }
    
    // 获取教师列表
    this.loadTeacherList()
    
    // 初始化表单
    this.initForm()
    
    // 如果有违纪记录,加载违纪信息
    if (this.scheduleInfo.hasViolation && this.scheduleInfo.violationId) {
      this.loadViolationDetail(this.scheduleInfo.violationId)
    }
  },
  methods: {
    // 获取教师列表（从课表中获取）
    async loadTeacherList() {
      try {
        const token = getToken()
        
        // 从课表获取教师列表（需要从班级课表和实训室课表两个API获取）
        let allTeachers = new Set()
        
        // 1. 从班级课表获取
        await this.fetchTeachersFromSchedule(
          config.baseUrl + '/admin-api/ao/vocational-class-schedule/page',
          token,
          allTeachers,
          'class' // 班级课表类型
        )
        
        // 2. 从实训室课表获取
        await this.fetchTeachersFromSchedule(
          config.baseUrl + '/admin-api/ao/lab-schedule/page',
          token,
          allTeachers,
          'lab' // 实训室课表类型
        )
        
        // console.log('提取到的教师数量:', allTeachers.size)
        
        // 转换为数组并排序
        this.teacherList = Array.from(allTeachers)
          .map((name, index) => ({
            teacherId: index + 1,
            teacherName: name
          }))
          .sort((a, b) => {
            return a.teacherName.localeCompare(b.teacherName, 'zh-CN')
          })
      } catch (err) {
        console.error('加载教师列表失败:', err)
      }
    },
    
    // 从课表API中提取教师名称
    async fetchTeachersFromSchedule(url, token, teachersSet, type) {
      let pageNo = 1
      const pageSize = 100
      let hasMore = true
      let totalRecords = 0
      
      while (hasMore) {
        const response = await uni.request({
          url: url,
          method: 'GET',
          header: {
            'Authorization': 'Bearer ' + token,
            'tenant-id': '1',
            'Content-Type': 'application/json'
          },
          data: {
            pageNo: pageNo,
            pageSize: pageSize
          }
        })
        
        const [error, res] = response
        
        if (!error && res.data && res.data.code === 0 && res.data.data) {
          const list = res.data.data.list || []
          totalRecords += list.length
          
          // 从每条课表记录中提取教师名称
          list.forEach(schedule => {
            // 遍历周一到周日的课程字段
            const dayFields = type === 'class' 
              ? ['mondayCourse', 'tuesdayCourse', 'wednesdayCourse', 'thursdayCourse', 'fridayCourse', 'saturdayCourse', 'sundayCourse']
              : ['mondayUsage', 'tuesdayUsage', 'wednesdayUsage', 'thursdayUsage', 'fridayUsage', 'saturdayUsage', 'sundayUsage']
            
            dayFields.forEach(field => {
              const courseInfo = schedule[field]
              if (courseInfo && courseInfo.trim()) {
                // 解析课程信息
                const lines = courseInfo.split(/[\r\n]+/).filter(line => line.trim())
                
                if (type === 'class' && lines.length >= 2) {
                  // 班级课表格式: "课程名\r\n教师名\r\n场地名"
                  const teacherName = lines[1].trim()
                  if (teacherName) {
                    teachersSet.add(teacherName)
                  }
                } else if (type === 'lab' && lines.length >= 2) {
                  // 实训室课表格式: "年级+班级\r\n课程名 教师名"
                  const courseAndTeacher = lines[1] || ''
                  const parts = courseAndTeacher.split(/\s+/).filter(p => p.trim())
                  if (parts.length >= 2) {
                    const teacherName = parts.slice(1).join(' ').trim()
                    if (teacherName) {
                      teachersSet.add(teacherName)
                    }
                  }
                }
              }
            })
          })
          
          const total = res.data.data.total || 0
          if (list.length < pageSize || totalRecords >= total) {
            hasMore = false
          } else {
            pageNo++
          }
        } else {
          hasMore = false
        }
      }
      
    },
    
    // 初始化表单
    initForm() {
      // 获取当前登录用户的昵称
      const currentUserName = this.$store.state.user.name || '未知教师'
      
      this.patrolForm = {
        id: null,
        scheduleId: this.scheduleId,
        patrolTeacherName: currentUserName, // 自动填充当前用户昵称
        violationType: '',
        violationCount: 0,
        violationDesc: '',
        status: 0 // 默认为待处理
      }
      
      this.selectedViolations = []
      this.violationCounts = {}
    },
    
    // 重置表单
    resetForm() {
      this.initForm()
    },
    
    // 加载违纪记录详情
    async loadViolationDetail(violationId) {
      try {
        const token = getToken()
        const response = await uni.request({
          url: config.baseUrl + `/admin-api/ao/patrol/get?id=${violationId}`,
          method: 'GET',
          header: {
            'Authorization': 'Bearer ' + token,
            'tenant-id': '1',
            'Content-Type': 'application/json'
          }
        })
        
        const [error, res] = response
        if (!error && res.data.code === 0) {
          const violation = res.data.data
          
          // 填充表单
          this.patrolForm.id = violation.id
          this.patrolForm.patrolTeacherName = violation.patrolTeacherName || ''
          this.patrolForm.violationDesc = violation.violationDesc || ''
          this.patrolForm.status = violation.status || 0
          
          // 解析违纪类型和人数
          const violationTypes = (violation.violationType || '').split(/[,，]/).map(t => t.trim())
          const violationDesc = violation.violationDesc || ''
          
          // 从描述中解析人数
          violationTypes.forEach(type => {
            const regex = new RegExp(`${type}(\\d+)人`)
            const match = violationDesc.match(regex)
            if (match) {
              const count = parseInt(match[1])
              this.$set(this.violationCounts, type, count)
              if (!this.selectedViolations.includes(type)) {
                this.selectedViolations.push(type)
              }
            }
          })
        }
      } catch (err) {
        console.error('加载违纪记录失败:', err)
      }
    },
    
    // 设置违纪人数
    setViolationCount(type, count) {
      // 如果点击的是已经选中的按钮,则取消选中(设为0)
      const currentCount = this.violationCounts[type]
      if (currentCount === count) {
        count = 0
      }
      
      if (count > 0) {
        this.$set(this.violationCounts, type, count)
        // 如果不在选中列表中,添加进去
        if (!this.selectedViolations.includes(type)) {
          this.selectedViolations.push(type)
        }
      } else {
        // 人数为0,从选中列表移除
        const index = this.selectedViolations.indexOf(type)
        if (index > -1) {
          this.selectedViolations.splice(index, 1)
        }
        this.$delete(this.violationCounts, type)
      }
      
      // 自动更新描述框
      this.updateViolationDesc()
    },
    
    // 自动更新违纪描述
    updateViolationDesc() {
      const descriptions = []
      this.selectedViolations.forEach(type => {
        const count = this.violationCounts[type]
        if (count > 0) {
          // 使用阿拉伯数字
          descriptions.push(`${type}${count}人`)
        }
      })
      
      // 更新描述框内容
      this.patrolForm.violationDesc = descriptions.join('，')
    },
    
    // 显示"其他"输入框
    showOtherInput(type) {
      const input = prompt('请输入人数(大于0的数字):')
      if (input !== null && input !== '') {
        const count = parseInt(input) || 0
        if (count > 0) {
          this.setViolationCount(type, count)
        } else {
          uni.showToast({
            title: '请输入大于0的数字',
            icon: 'none'
          })
        }
      }
    },
    
    // 获取违纪类型的人数
    getViolationCount(type) {
      return this.violationCounts[type] || 0
    },
    
    // 获取总人数
    getTotalCount() {
      return Object.values(this.violationCounts).reduce((sum, count) => sum + count, 0)
    },
    
    // 获取违纪统计摘要
    getViolationSummary() {
      const summary = this.selectedViolations
        .map(type => `${type}${this.violationCounts[type]}人`)
        .join(' ')
      return summary || '暂无违纪情况'
    },
    
    // 删除巡班记录
    deletePatrol(patrol) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条巡班记录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const token = getToken()
              const response = await uni.request({
                url: config.baseUrl + `/admin-api/ao/patrol/delete?id=${patrol.id}`,
                method: 'DELETE',
                header: {
                  'Authorization': 'Bearer ' + token,
                  'tenant-id': '1',
                  'Content-Type': 'application/json'
                }
              })

              const [error, result] = response
              
              if (!error && result.data.code === 0) {
                this.$modal.msgSuccess('删除成功')
                this.getPatrolList()
              } else {
                this.$modal.msgError(result.data.msg || '删除失败')
              }
            } catch (err) {
              console.error('删除巡班记录失败:', err)
              this.$modal.msgError('删除失败')
            }
          }
        }
      })
    },
    
    // 提交巡班记录
    async submitPatrol() {
      // console.log('===== 开始提交巡班记录 =====')
      
      // 验证必填字段
      if (!this.patrolForm.patrolTeacherName) {
        this.$modal.msgError('请输入巡班教师姓名')
        return
      }
      
      // 移除强制选择违纪的限制,允许无违纪记录
      // 如果没有选择违纪,则记录为"无违纪"

      try {
        const token = getToken()
        
        // 拼接违纪类型和总人数
        // 如果没有选择违纪,记录为"无违纪"
        const violationType = this.selectedViolations.length > 0 
          ? this.selectedViolations.join(', ') 
          : '无违纪'
        const totalCount = this.selectedViolations.length > 0
          ? Object.values(this.violationCounts).reduce((sum, count) => sum + count, 0)
          : 0

        // 处理日期: 如果是星期文本,转换为今天的日期
        let classDate = this.scheduleInfo.classDate || ''
        if (classDate.includes('星期')) {
          // 如果是星期文本,使用今天的日期
          const today = new Date()
          const year = today.getFullYear()
          const month = String(today.getMonth() + 1).padStart(2, '0')
          const day = String(today.getDate()).padStart(2, '0')
          classDate = `${year}-${month}-${day}`
          // console.log('⚠️ classDate是星期文本,已转换为今天日期:', classDate)
        }

        const requestData = {
          patrolTeacherName: this.patrolForm.patrolTeacherName,
          violationType: violationType,
          violationCount: totalCount,
          violationDesc: this.selectedViolations.length > 0 
            ? this.patrolForm.violationDesc 
            : '无违纪',  // 如果没有违纪,描述为"无违纪"
          status: this.patrolForm.status,
          classDate: classDate,
          classTime: `${this.scheduleInfo.startTime}-${this.scheduleInfo.endTime}`,
          courseName: this.scheduleInfo.courseName || '未知',
          teacherName: this.scheduleInfo.teacherName,
          classroom: this.scheduleInfo.classLocation,
          className: this.scheduleInfo.className, // 添加班级名称
          teacherId: null, // 教师ID为空
          patrolTeacherId: null // 巡班教师ID为空
        }
        
        // 如果是编辑模式,添加id字段
        if (this.patrolForm.id) {
          requestData.id = this.patrolForm.id
        }
        
        // 根据是否有id判断是新增还是更新
        const apiUrl = this.patrolForm.id 
          ? config.baseUrl + '/admin-api/ao/patrol/update'
          : config.baseUrl + '/admin-api/ao/patrol/create'
        const method = this.patrolForm.id ? 'PUT' : 'POST'
        const successMsg = this.patrolForm.id ? '修改成功' : '添加成功'

        const response = await uni.request({
          url: apiUrl,
          method: method,
          header: {
            'Authorization': 'Bearer ' + token,
            'tenant-id': '1',
            'Content-Type': 'application/json'
          },
          data: requestData
        })

        const [error, res] = response
        
        if (!error && res.data.code === 0) {
          this.$modal.msgSuccess(successMsg)
          // 重置表单
          this.resetForm()
          // 可选: 1秒后跳转回列表页
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          this.$modal.msgError(res.data.msg || '操作失败')
        }
      } catch (err) {
        this.$modal.msgError('操作失败')
      }
    },
    
    // 获取课程状态
    getStatusClass() {
      return 'ongoing'
    },
    
    // 获取状态文本
    getStatusText() {
      return '上课中'
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.info-card {
  background-color: #fff;
  margin: 10px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.scheduled {
  background-color: #e3f2fd;
  color: #007aff;
}

.status-badge.ongoing {
  background-color: #d1fae5;
  color: #10b981;
}

.status-badge.completed {
  background-color: #f3f4f6;
  color: #999;
}

.info-list {
  padding: 10px 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-size: 14px;
  color: #666;
}

.info-item .value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.info-item .value-input {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 12px;
  background-color: #fafafa;
  flex: 1;
  height: 40px;
  line-height: 20px;
}

.info-item .value-input:focus {
  border-color: #1890ff;
  background-color: #fff;
}

.info-item .value-select {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 12px;
  background-color: #fafafa;
  flex: 1;
  height: 40px;
  line-height: 20px;
}

.info-item .value-select:focus {
  border-color: #1890ff;
  background-color: #fff;
}

.patrol-records {
  background-color: #fff;
  margin: 10px;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.patrol-form-container {
  background-color: #fff;
  margin: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.form-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.form-body {
  padding: 15px;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.required {
  color: red;
}

.optional {
  color: #10b981;
  font-size: 12px;
  font-weight: normal;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: #f5f5f5;
}

.form-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  min-height: 80px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid #007aff;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.patrol-teacher {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.icon {
  font-size: 16px;
}

.patrol-time {
  font-size: 12px;
  color: #999;
}

.record-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.record-row {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.record-row .label {
  color: #666;
  min-width: 70px;
}

.record-row .value {
  color: #333;
  flex: 1;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-tag.pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-tag.handled {
  background-color: #d1fae5;
  color: #065f46;
}

.record-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.record-actions button {
  padding: 4px 12px;
  font-size: 12px;
}

.empty-records {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
  gap: 10px;
}

.empty-icon {
  font-size: 40px;
}

.violation-types {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.violation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.violation-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 60px;
}

.violation-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.num-btn,
.other-btn {
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
}

.num-btn::after,
.other-btn::after {
  border: none;
}

.num-btn.active,
.other-btn.active {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}

.num-btn:active,
.other-btn:active {
  opacity: 0.8;
}

.count-label {
  font-size: 14px;
  color: #007aff;
  font-weight: bold;
  min-width: 45px;
  text-align: right;
}

.violation-summary {
  margin-top: 12px;
  padding: 12px;
  background-color: #e3f2fd;
  border-radius: 8px;
  border-left: 3px solid #007aff;
}

.summary-text {
  font-size: 13px;
  color: #333;
}

.no-violation-tip {
  margin-top: 12px;
  padding: 12px;
  background-color: #d1fae5;
  border-radius: 8px;
  border-left: 3px solid #10b981;
}

.tip-text {
  font-size: 13px;
  color: #065f46;
}

.status-radios {
  display: flex;
  gap: 20px;
}

.status-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.status-radio.active {
  border-color: #007aff;
  background-color: #e3f2fd;
}

.radio-icon {
  font-size: 18px;
  color: #ddd;
}

.status-radio.active .radio-icon {
  color: #007aff;
}

.form-footer {
  display: flex;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid #f0f0f0;
}

.cancel-btn {
  flex: 1;
  background-color: #f5f5f5 !important;
  color: #666 !important;
  border: none !important;
}

.submit-btn {
  flex: 1;
}
</style>
